﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BEdit.js Test Page</title>
<script src="dollar.js"></script>
<script src="BEdit.js"></script>
<style>
body{
	font-size: 12px;
}
.origin-value{display:none}
</style>
</head>
<body>
<table>
	<thead>
		<tr>
			<th>ID</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		<tr rid="1">
			<td>1</td>
			<td bfield="name">
				<span class="origin-value">Baboo</span>
				<span class="value-cnt">Baboo</span>
			</td>
			<td bfield="sex">
				<span class="origin-value">1</span>
				<span class="value-cnt">male</span>
			</td>
			<td bfield="age">
				<span class="origin-value">12</span>
				<span class="value-cnt">12</span>
			</td>
			<td><a class="action-btn" href="javascript:void(0)" baction="edit">edit</a><span>&nbsp;|&nbsp;</span><a class="action-btn"  href="javascript:void(0)" baction="delete">del</a></td>
		</tr>
		<tr rid="2">
			<td>2</td>
			<td bfield="name">
				<span class="origin-value">txw</span>
				<span class="value-cnt">txw</span>
			</td>
			<td bfield="sex">
				<span class="origin-value">1</span>
				<span class="value-cnt">male</span>
			</td>
			<td bfield="age">
				<span class="origin-value">12</span>
				<span class="value-cnt">12</span>
			</td>
			<td><a class="action-btn" href="javascript:void(0)"  baction="edit">edit</a><span>&nbsp;|&nbsp;</span><a class="action-btn"  href="javascript:void(0)" baction="delete">del</a></td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td><input type="text" name="name" value=""/></td>
			<td><select name="sex"><option value="1">male</opiton><option value="0">female</option></select></td>
			<td><input type="text" name="age" value=""/></td>
			<td><input id="insert-btn" type="button" value="insert"/></td>
		</tr>
	</tfoot>
</table>
<script>
var be = new $.BEdit({
	create_line : function (j) {
		var tr = document.createElement('tr');
		$.setAttribute(tr, 'rid', j.id);
		$(tr.appendChild($.node('td'))).html(j.id);
		$(tr.appendChild($.node('td'))).$('bfield', 'name').html('<span class="origin-value">${name}</span><span class="value-cnt"></span>'.process(j));
		$(tr.appendChild($.node('td'))).$('bfield', 'sex').html('<span class="origin-value">${sex}</span><span class="value-cnt"></span>'.process(j));
		$(tr.appendChild($.node('td'))).$('bfield', 'age').html('<span class="origin-value">${age}</span><span class="value-cnt"></span>'.process(j));
		$(tr.appendChild($.node('td'))).html('<a class="action-btn" href="javascript:void(0)"  baction="edit">edit</a><span>&nbsp;|&nbsp;</span><a class="action-btn"  href="javascript:void(0)" baction="delete">del</a>');
		return tr;
	},
	action_url : 'bedit_server.php',
	cnt : $('table tbody'),
	select_fields : {
		'sex' : [{text:'male', value:'1'}, {text:'female', value:'0'}]	
	},
	processors : {
		'sex' : function (v) {
			return ({'1' : 'male', '0' : 'female'})[v];
		}	
	},
	rules : {
		'name' : [{type:'required', msg:'is empty'}, {type : 'mlengthLimit', param: 10, msg : 'too long'} ],
		'age' : {type:'digit', param:[10,100], msg:'not digits | too small | too big'}
	},
	error_all : function (v, name, msg) {
			alert(name+ ':' + msg);
	},
	update_text : 'update',
	insert_text : 'add',
	cancel_text : 'cancel',
	delete_text : 'delete',
	edit_text : 'edit',
	onPosting: function () {
		//$('#mask').show();
	},
	onSuccess: function () {$('#mask').hide();},
	onError: function () {$('#mask').hide();}
});
$('#insert-btn').click(function(){
	be.__ajax_post('insert', this.parentNode.parentNode);
}, true);
</script>
<div id="mask" style="position:absolute;left:0;top:0;z-index:10;width:100%;height:100%;background:#ccc;opacity:0.5;filter:aplha(opacity=50);display:none">操作中...</div>
<form action="bedit_server.php" method="post">
	<input name="name" type="text" value=""/>
	<input name="age" type="text" value=""/>
	<input type="submit"/>
</form>
</body>
</html>
                                                            